<template>
  <div id="home">
	  <!-- 页面头部 -->
	<div class="top">
		<div class="top-logo">
			<img src="../assets/home.png" alt="" >
			<div class="top-right">
				<div class="top-saoma">
					<img src="../assets/scan.png" alt="">
					<span>扫一扫</span>
				</div>
				<div class="top-msg">
					<van-icon name="chat-o" badge="9" color="white" size="30px"/>
					
					
					<span>消息</span>
				</div>
			</div>
		</div>
	 <div class="search">
		 <van-search
		   v-model="value"
		   shape="round"
		   background="#c01535"
		   placeholder="请输入商品关键词"
		 />
		 
	 </div>
	 <div class="top-background">
		 <div class="swipe">
		 		 <van-swipe :autoplay="3000" class="van-swipe">
		 		   <van-swipe-item v-for="(image, index) in images" :key="index">
		 		     <img v-lazy="image" />
		 		   </van-swipe-item>
		 		 </van-swipe>
		 </div>
	 </div>
	</div>
	<!-- 商品 -->
	<div class="goods">
		<van-divider :style="{ color: '#707070', borderColor: '#707070', padding: '0 12px'}">		  商品
		</van-divider>
			<van-grid>
			  <van-grid-item replace to="/goods">
				  <van-grid-item icon="photo-o" text="华为2" />
				    <span>￥9999.00</span>
			  </van-grid-item>
			  <van-grid-item  replace to="/goods">
			  				  <van-grid-item icon="photo-o" text="华为2" />
			  				    <span>￥9999.00</span>
			  </van-grid-item>  
			   <van-grid-item  replace to="/goods">
			   				  <van-grid-item icon="photo-o" text="华为2" />
			   				    <span>￥9999.00</span>
			   </van-grid-item>
			   <van-grid-item  replace to="/goods">
			   				  <van-grid-item icon="photo-o" text="华为2" />
			   				    <span>￥9999.00</span>
			   </van-grid-item>
			  
			  
			</van-grid>		
	</div> 
  </div>
</template>

<script>
	export default {
	  data() {
	    return {
		  value:'',
	      images: [
	        require("@/assets/f9629c893cfbadf1.jpg_cc_1580x830.jpg"),
			require("@/assets/2e6d5eb922413776.jpg_cc_1580x830.jpg"),
			require("@/assets/c256fde55e977223.jpg_cc_1580x830.jpg")			
	      ],		  
	    };
	  },
	};
</script>

<style>
	.top-logo{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #C01535;
		
		margin: 0 auto;
		height: 7vh;
		
	}
	.top-logo>img{
		height: 5vh;
		width: 7vw;
		color: #868686;
		margin-left: 4vw;
		margin-top: 1vh;
	}
	.top-right{
		display: flex;
		flex-direction: row;
		margin-right: 4vw;
		margin-top: 1vh;
		
	}
	.top-saoma{
		width: 14vw;
		border: 1px solid #1E1E1E;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		text-align: center;
	}
	
	.top-saoma>img{
		border: 1px solid #1E1E1E;
		height: 3vh;
		width: 7vw;
		margin: 0 auto;
		
	}
	.top-saoma>span{
		color: #ffffff;
		border: 1px solid #1E1E1E;
	}
	.top-msg{
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border: 1px solid #1E1E1E;
		text-align: center;
		
	}
		
	
	.top-msg>span{
		color: #ffffff;
	}
	.swipe{
		width: 90%;
		height: 20vh;
		margin: 0 auto;
		
		
	}
	.top-background{
		background-color: #c01535;
		height: 20vh;
		width: 100%;
		border-radius: 0 0 20px 20px ;
		
	}
	img{
		width: 100%;
		height: 20vh;
		margin-top: 2vh;
		
		
	}

</style>
